﻿@model FujiyBlog.Web.Areas.Admin.ViewModels.AdminTagsList
@{
    ViewBag.Title = "Tags";
    Layout = MVC.Admin.Post.Views._Layout;
}
<h2>
    Tags</h2>

<table>
    <tr>
        <th>
        </th>
        <th>
            @Html.LabelFor(model => model.TagsPostCount.FirstOrDefault().Key.Name)
        </th>
        <th>
            Posts
        </th>
    </tr>
    @foreach (var item in Model.TagsPostCount)
    {
        <tr data-item-id="@item.Key.Id" id="item-row-@item.Key.Id">
            <td>
                <a href="javascript:void(0);" class="btn-edit-item">Edit</a>
                @Ajax.ActionLink("Delete", MVC.Admin.Post.DeleteTag(item.Key.Id), new AjaxOptions() { HttpMethod = "POST", Confirm = "Sure?", OnSuccess = "RemoveItemRow(" + item.Key.Id + ");" }, new { @class = "btn-delete-item" })

                <a href="javascript:void(0);" class="btn-update-item" style="display:none">Update</a>
                <a href="javascript:void(0);" class="btn-cancel-item" style="display:none">Cancel</a>
                
            </td>
            <td>
                @Html.TextBoxFor(modelItem => item.Key.Name, new { id = "txt-item-name" + item.Key.Id, style = "display:none", @class = "txt-item-name" })
                <span class="lbl-item-name">@Html.DisplayFor(modelItem => item.Key.Name)</span>
            </td>
            <td>
                @item.Value
            </td>
        </tr>
    }
</table>

<script type="text/javascript">
    $('.btn-edit-item').click(function () {
        var $this = $(this);
        var itemRow = $this.parents('tr');

        $this.hide();
        $this.siblings('.btn-delete-item').hide();
        $this.siblings('.btn-update-item,.btn-cancel-item').show();

        itemRow.find('.txt-item-name').show();
        itemRow.find('.lbl-item-name').hide();
    });

    $('.btn-cancel-item').click(function () {
        var $this = $(this);
        var itemRow = $this.parents('tr');

        $this.hide();
        $this.siblings('.btn-edit-item,.btn-delete-item').show();
        $this.siblings('.btn-update-item').hide();

        itemRow.find('.txt-item-name').hide();
        itemRow.find('.lbl-item-name').show();
    });

    function RemoveItemRow(itemId) {
        $('#item-row-' + itemId).hide();
    }

    $('.btn-update-item').click(function () {
        var itemRow = $(this).parents('tr');
        var itemId = itemRow.data('item-id')
        var txtItemName = itemRow.find('#txt-item-name' + itemId);
        var itemName = txtItemName.val()

        if (itemName === '') {
            return;
        }

        var callUrl = '@Url.Action(MVC.Admin.Post.UpdateTag())';
        var callData = { id: itemId, name: itemName };
        $.ajax({
            type: "POST",
            url: callUrl,
            data: callData,
            success: function (response) {
                if (!response.errorMessage) {
                    txtItemName.val(itemName);
                    itemRow.find('.lbl-item-name').text(itemName);
                    itemRow.find('.btn-cancel-item').click();
                }
                else {
                    alert(response.errorMessage);
                }
            },
            error: function () {
                alert('Error');
            }
        });
    });
</script>